<template>
    <div class="login">
        <win-button></win-button>
        <Card class="login-form">
            <p slot="title">Welcome</p>
            <Form ref="formInline">
                <FormItem prop="user">
                    <Input type="text" placeholder="Username" v-model="account">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" placeholder="Password" v-model="password">
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Button style="width: 100%" type="primary" @click="login()">
                        Sign In
                    </Button>
                </FormItem>
            </Form>
        </Card>
    </div>
</template>
<script>

    const {ipcRenderer} = require('electron')

    import WinButton from "./Common/WinButton"

    export default {
        name: "Login",
        components: {
            WinButton
        },
        data() {
            return {
                account: "admin",
                password: "admin"
            }
        },
        created() {
            document.onkeydown(e => {
                var key = window.event.keyCode;
                if (key == 13) {
                    this.login();
                }
            })
        },
        methods: {
            login() {
                this.$http({
                    method: 'post',
                    url: this.apiBase + '/blog/login',
                    data: {
                        account: this.account,
                        password: this.password
                    }
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            ipcRenderer.send('to-mainWindow', "to-mainWindow")
                        } else {
                            this.$Message.error("登录失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            }
        },
        created() {

        }
    };
</script>
<style scoped>
    .login {
        width: 100%;
        height: 100%;
        background-image: url("~@/assets/login-bg.jpg");
        overflow: hidden;
    }

    .login-form {
        position: absolute;
        top: calc((100% / 3));
        right: calc((100% / 6));
        width: 300px;
    }

</style>
